<template>
	<v-scale-screen width="1920" height="1080" style="position: relative;background: #040f48;" :fullScreen="false">

		<div style="height: 64px;background-size:100% 100%;background-repeat: no-repeat;width: 100%;"
			:style="{'backgroundImage':'url('+require('../assets/bigScreen/icon1.png')+')'}" class="displayFlexBet">
			<div class="displayFlex" style="padding-left: 152px;padding-top: 20px;">
				<div class="point" :class="[selectedContent2 == '低碳生产'?'headerTitle2Selected':'headerTitle2']"
					@click="selectedContent2 = '低碳生产'">低碳生产</div>
				<div class="point" :class="[selectedContent2 == '实时工况'?'headerTitle2Selected':'headerTitle2']"
					@click="selectedContent2 = '实时工况'">实时工况</div>
				<div class="point" :class="[selectedContent2 == 'AI巡检'?'headerTitle2Selected':'headerTitle2']"
					@click="selectedContent2 = 'AI巡检'">AI巡检</div>
			</div>
			<div class="headerTitle point" @click="selectedContent2 = ''">{{(setting.entShortName || '') + '环保数字大屏'}}</div>
			<div class="displayFlex" style="padding-right: 152px;padding-top: 20px;">
				<div class=" point" :class="[selectedContent2 == '废气超低排放'?'headerTitle3Selected':'headerTitle3']"
					@click="selectedContent2 = '废气超低排放'">
					废气超低排放
				</div>
				<div class=" point" :class="[selectedContent2 == '污水超低排放'?'headerTitle3Selected':'headerTitle3']"
					@click="selectedContent2 = '污水超低排放'">污水超低排放
				</div>
				<div class=" point">
					<div v-if="!options.includes(selectedContent2)" class="headerTitle3" @click="selectedContent2 = '无废工厂'">
						无废工厂</div>
					<select v-else v-model="selectedContent2"
						:class="[options.includes(selectedContent2)?'headerTitle3Selected':'headerTitle3']">
						<option value="无废工厂">无废工厂</option>
						<option value="危废管理">危废管理</option>
						<option value="一般工业固废管理">一般工业固废管理</option>
						<option value="无废工厂建设方案">无废工厂建设方案</option>
						<option value="无废工厂建设成效">无废工厂建设成效</option>
					</select>
				</div>
			</div>
		</div>

		<lineCom v-if="selectedContent2 == '实时工况'" style="padding:12px 20px;"></lineCom>
		<wufie v-if="selectedContent2 == '危废管理' || selectedContent2 == '无废工厂'" style="padding:12px 20px;"></wufie>
		<gufei v-else-if="selectedContent2 == '一般工业固废管理'" style="padding:12px 20px;"></gufei>
		<timeLine v-else-if="selectedContent2 == '无废工厂建设方案'" style="padding:12px 20px;"></timeLine>
		<wfcx v-else-if="selectedContent2 == '无废工厂建设成效'" style="padding:12px 20px;"></wfcx>

		<fqcdpf v-if="selectedContent2 == '废气超低排放' && setting.gasOutlet == 'ONLINE_MONITOR'" style="padding:12px 20px;" />
		<fqcdpf2 v-if="selectedContent2 == '废气超低排放' && setting.gasOutlet == 'ONLINE_MANUAL_MONITOR'"
			style="padding:12px 20px;" />

		<dtsc v-if="selectedContent2 == '低碳生产'" style="padding:12px 20px;"></dtsc>
		<riskPreview v-if="selectedContent2 == 'AI巡检'" style="padding:12px 20px;"></riskPreview>
		<div v-show="selectedContent2 == ''" class="displayFlexBet" style="padding:12px 20px;">
			<div style="width: 450px;">
				<div style="width:100%;height: 223px;background: #041C62;" class="point">
					<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);" class="displayFlex">
						<div :class="[selectItem == '实时环境监测'?'selectedClass':'ml20']" class="font18"
							:style="{'color':selectItem == '实时环境监测'?'#fff':'#679EFF'}"
							@click="getGasOnlineLatestMonitorByOutletIdV2('实时环境监测')">
							实时环境监测
						</div>
						<div :class="[selectItem == '自行环境监测'?'selectedClass':'']" class="font18 ml20"
							:style="{'color':selectItem == '自行环境监测'?'#fff':'#679EFF'}"
							@click="getGasOnlineLatestMonitorByOutletIdV2('自行环境监测')">
							自行环境监测
						</div>
						<div style="color: #FE0F47;" v-if="mock.mock1">（模拟数据）</div>
					</div>

					<div
						style="color: #367FFF;padding:20px 0px 0 129px;overflow-x: auto;white-space: nowrap;width: calc(100% - 20px);">
						<div v-for="(item,index) in data1" :key="index" class="mr30 font14 point"
							@click="outletId = item.outletId" style="display: inline-block;color: #5693FF;vertical-align:top"
							:class="[outletId == item.outletId?'selected2':'']">
							<div style="padding-left: 20px;">{{item.outletName}}</div>
							<div style="padding-right: 20px;">
								<img src="../assets/sIcon169.png" v-if="outletId == item.outletId"
									style="width: 140%;height: 2px;" />
								<div v-else style="height: 12px;width: 140%;"></div>
							</div>
						</div>
					</div>

					<div v-for="(item, index) in data1" :key="index" v-if="outletId == item.outletId"
						@click="openUrl('/wasteGas/onlineSurveyPreview')"
						style="color:#fff;overflow-x: auto;padding: 50px 0 20px 10px;white-space: nowrap;">
						<div v-for="(item2, index2) in item.pollutionList" :key="index2"
							style="margin-bottom: 8px;width:150px;text-align:center;display: inline-block;">
							<div style="margin-bottom:4px">
								<span style="font-size: 24px;" class="fontBold">{{ item2.actualAmount }}</span>
								<span style="font-size: 14px;">{{ item2.unitValue }}</span>
							</div>
							<div style="font-size:16px;color:#75E7FF">{{ item2.pollutionName }}</div>
						</div>
					</div>
				</div>

				<div style="width:calc(100% - 8px);height: 304px;margin: 10px 4px 0;background: #041C62;;">
					<!-- <div class="titleText" style="padding: 21px 30px;">无组织排放</div> -->
					<div class="displayFlexBet" style="padding: 3px 5px;text-align: center;border: 1px solid #1649A4;">
						<div class="displayFlex" style="flex:2" v-if="selectItem2 == '在线监测'">
							<div style="flex: 1;height: 34px;" class="normal2 point"
								@click="selectType2 = 'DISORGANIZED_OUTLET',getGasDisOrganizedMonitorDet(),getPollutionDayCharts()"
								:class="[selectType2 == 'DISORGANIZED_OUTLET'?'normalSelected2':'']">无组织排放</div>
							<div style="flex: 1;height: 34px;" class="normal2 point"
								@click="selectType2 = 'ORGANIZED_OUTLET',getGasDisOrganizedMonitorDet(),getPollutionDayCharts()"
								:class="[selectType2 == 'ORGANIZED_OUTLET'?'normalSelected2':'']">有组织排放</div>
						</div>
						<div v-else style="flex: 2;"></div>
						<div style="width: 100px;margin-left: 30px;">
							<el-select v-model="selectItem2" placeholder="请选择" @change="getGasDisOrganizedMonitorDet()">
								<el-option key="在线监测" label="在线监测" value="在线监测" />
								<el-option key="自行监测" label="自行监测" value="自行监测" />
							</el-select>
						</div>
					</div>

					<div class="displayFlexBet point" style="padding: 10px 20px 0;" v-if="selectItem2 == '在线监测'"
						@click="openUrl('/wasteGas/onlineSurveyPreview')">
						<div style="flex: 1;padding-top: 16px;">
							<div style="margin-bottom: 3px;" class="colorfff">
								<span style="font-size: 24px;">{{data2.totalMonitorNum}}</span>
								<span style="font-size: 16px;">个</span>
							</div>
							<div style="font-size:14px;color:#75E7FF;">监测点位</div>
						</div>
						<div style="flex: 2" class="textCenter">
							<div style="position: relative;">
								<div>
									<img :src="publicPath + '/images/sIcon20.png'" style="width: 88px;height: 44px;" />
								</div>
								<div style="position: absolute;top: 70%;transform-origin: 0 0;left: 56%;"
									:style="{'transform':'rotate('+(data2.yearQualifiedPercent*1.8 - 90)+'deg)'}">
									<img src="../assets/sIcon174.png" style="width: 9px;height: 28px;" />
								</div>
							</div>
							<div style="color: #75E7FF;">
								<span>年度小时</span>
								<span style="color: #fff;" class="font24">{{data2.yearQualifiedPercent}}</span>
								<span style="color: #fff;">%</span>
								<span>达标</span>
							</div>
						</div>

						<div style="flex: 2" class="textCenter">
							<div style="position: relative;">
								<div>
									<img :src="publicPath + '/images/sIcon20.png'" style="width: 88px;height: 44px;" />
								</div>
								<div style="position: absolute;top: 70%;transform-origin: 0 0;left: 56%;"
									:style="{'transform':'rotate('+(data2.monthQualifiedPercent*1.8 - 90)+'deg)'}">
									<img src="../assets/sIcon174.png" style="width: 9px;height: 28px;" />
								</div>
							</div>
							<div style="color: #75E7FF;">
								<span>30天小时</span>
								<span style="color: #fff;" class="font24">{{data2.monthQualifiedPercent}}</span>
								<span style="color: #fff;">%</span>
								<span>达标</span>
							</div>
						</div>
					</div>

					<div class="displayFlexBet point" style="padding: 10px 20px 0;" v-else
						@click="openUrl('/wasteGas/survey')">
						<div style="flex: 1;padding-top: 16px;">
							<div style="margin-bottom: 3px;" class="colorfff">
								<span style="font-size: 24px;">{{data2.totalMonitorNum}}</span>
								<span style="font-size: 16px;">个</span>
							</div>
							<div style="font-size:14px;color:#75E7FF;">监测点位</div>
						</div>
						<div style="flex: 2" class="textCenter">
							<div style="position: relative;">
								<div>
									<img :src="publicPath + '/images/sIcon20.png'" style="width: 88px;height: 44px;" />
								</div>
								<div style="position: absolute;top: 70%;transform-origin: 0 0;left: 56%;"
									:style="{'transform':'rotate('+(data2.qualifiedPercent*1.8 - 90)+'deg)'}">
									<img src="../assets/sIcon174.png" style="width: 9px;height: 28px;" />
								</div>
							</div>
							<div style="color: #75E7FF;">
								<span>达标率</span>
								<span style="color: #fff;" class="font24">{{data2.qualifiedPercent}}</span>
								<span style="color: #fff;">%</span>
							</div>
						</div>

					</div>

					<div id="categoryChart2" style="width: 100%;height: 120px;margin-top: 37px;"></div>
				</div>

				<div style="width:100%;height: 254px;margin-top: 10px;background: #041E67;">
					<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);" class="displayFlex">
						<div class="inset-box">告警（24h）</div>
						<div style="color: #FE0F47;" v-if="mock.mock3">（模拟数据）</div>
					</div>
					<div style="color:#fff;overflow-y: hidden;height: 190px;padding:0 30px;"
						class="swiper-container2 mt20 point">
						<div class="swiper-wrapper">
							<div v-for="(item, index) in data3" :key="index" class="swiper-slide" @click="gotoDet(item)">
								<div style="position: relative;border-bottom: 1px solid#1649A4;" class="displayFlexBet pb5">
									<div style="width: 358px;" class="displayFlex">
										<div v-if="item.warningType == 'WARNING'" class="font12 textCenter"
											style="width: 38px;height: 20px;background: rgba(255,174,51,0.25);border: 1px solid #FFAE33;color: #FFAE33;">
											预警
										</div>
										<div v-else class="font12 textCenter"
											style="width: 38px;height: 20px;background: rgba(254,15,71,0.25);border: 1px solid #FE0F47;color: #FFAE33;">
											报警
										</div>
										<div class="ml25 textOver" style="max-width: 260px;">{{ item.content }}</div>
									</div>
									<div style="width:100px;color: #75E7FF;font-size: 14px;text-align: right;">
										{{ item.dateDiffStr }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div style=" width:100%;height: 184px;background: #041E67;" class="mt10">
					<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);">
						<div class="inset-box">AI巡检</div>
						<div style="color: #FE0F47;" v-if="mock.mock6">（模拟数据）</div>
					</div>

					<div style="color:#fff;padding-left: 30px;" class="displayFlexBet mt20 point"
						@click="openUrl('/risk/riskPreview')">
						<div id="main2" style="width: 110px;height: 108px;"></div>
						<div
							style="font-size: 12px;width: calc(100% - 130px);display: flex;flex-wrap: wrap;justify-content: space-between;">
							<div v-for="(item, index) in data6" :key="index"
								style="color:#fff;margin-bottom: 6px;font-size:14px;width: 50%;">
								<span>{{ item.title.split('（')[0] }}：</span>
								<span>{{ item.score }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="width: calc(100% - 930px);">
				<div style="width:100%;height: 544px;background: #041C62;">
					<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);"
						class="displayFlex mb14">
						<div class="inset-box mr10">实时工况</div>
						<div class="displayFlex">
							<div v-for="(item,index) in productionList" :key="index" class="font18 mr20 point"
								@click="getData(item)" :class="[item.id == params.equipmentId?'selectedClass':'']"
								:style="{'color':item.id == params.equipmentId?'#fff':'#679EFF'}">{{item.equipmentName}}</div>
						</div>
					</div>

					<div style="display: flex;justify-content: space-between;">
						<div style="flex:8;">
							<div style="background: linear-gradient(270deg, #0B3383, #1649A4);line-height: 32px;"
								class="font18 colorfff textCenter">
								生产设施运行状况
							</div>

							<div
								style="height: 450px;overflow-y: auto;padding: 12px;background-size: 310px 310px;background-repeat: no-repeat;background-position: 0% 50%;"
								:style="{'backgroundImage':'url('+require('../assets/bigScreen/icon10.png')+')'}">
								<div v-for="(item,index) in dataList5" :key="index" class="mb12 pb12 colorfff point"
									@click="openUrl('/produceManage/equipmentDet?installationId='+item.installationId)"
									style="background: #1649A4;box-shadow: 0px 1px 4px 0px rgba(0,15,34,0.25);">

									<div class="displayFlexBet" style="padding: 10px 21px;">
										<div class="font16">{{item.installationName}}</div>
										<div class="font12">
											{{item.dateStr || '--'}}
										</div>
									</div>

									<div v-if="item.paramList && item.paramList.length"
										style="background: #041C62;margin: 0 12px 10px;">
										<div class="displayFlexBet" v-for="(item2,index2) in item.paramList" :key="index2"
											:class="[index2 == (item.paramList.length -1)?'':'borderBottom']"
											style="line-height: 40px;padding: 0 17px;">
											<div class="font14" style="color:#fff">{{item2.parameterName}}</div>
											<div class="font14" :style="{'color':item2.status  == 'ABNORMAL'?'#FF537B':'#75E7FF'}">
												{{item2.latestAmount}}{{item2.unitCode}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div style="flex:8;border-left: 1px solid#1649A4;border-right: 1px solid#1649A4;">
							<div style="background: linear-gradient(270deg, #0B3383, #1649A4);line-height: 32px;"
								class="font18 colorfff textCenter">
								废气处理设施运行状况
							</div>

							<div :style="{'backgroundImage':'url('+require('../assets/bigScreen/icon9.png')+')'}"
								style="height: 450px;overflow-y: auto;padding: 12px;background-size: 310px 310px;background-repeat: no-repeat;background-position: 0% 50%;">
								<div v-for="(item,index) in dataList6" :key="index" class="mb12 pb12 colorfff point"
									@click="openUrl('/wasteGas/outletInspectDefDet?defenceId='+item.installationId)"
									style="background: #1649A4;box-shadow: 0px 1px 4px 0px rgba(0,15,34,0.25);">

									<div class="displayFlexBet" style="padding: 10px 21px;">
										<div class="font16">{{item.installationName}}</div>
										<div class="font12">
											{{item.dateStr || '--'}}
										</div>
									</div>

									<div v-if="item.paramList && item.paramList.length"
										style="background: #041C62;margin: 0 12px 10px;">
										<div class="displayFlexBet" v-for="(item2,index2) in item.paramList" :key="index2"
											:class="[index2 == (item.paramList.length -1)?'':'borderBottom']"
											style="line-height: 40px;padding: 0 17px;">
											<div class="font14" style="color:#fff">{{item2.parameterName}}</div>
											<div class="font14" :style="{'color':item2.status  == 'ABNORMAL'?'#FF537B':'#75E7FF'}">
												{{item2.latestAmount}}{{item2.unitCode}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div style="flex:8;">
							<div style="background: linear-gradient(270deg, #0B3383, #1649A4);line-height: 32px;"
								class="font18 colorfff textCenter">
								废水处理设施运行状况
							</div>

							<div :style="{'backgroundImage':'url('+require('../assets/bigScreen/icon11.png')+')'}"
								style="height: 450px;overflow-y: auto;padding: 12px;background-size: 310px 310px;background-repeat: no-repeat;background-position: 0% 50%;">
								<div v-for="(item,index) in dataList7" :key="index" class="mb12 pb12 colorfff point"
									@click="openUrl('/wasteWater/outletInspectDefDet?defenceId='+item.installationId)"
									style="background: #1649A4;box-shadow: 0px 1px 4px 0px rgba(0,15,34,0.25);">
									<div class="displayFlexBet" style="padding: 10px 21px;">
										<div class="font16">{{item.installationName}}</div>
										<div class="font12">
											{{item.dateStr || '--'}}
										</div>
									</div>

									<div v-if="item.paramList && item.paramList.length"
										style="background: #041C62;margin: 0 12px 10px;">
										<div class="displayFlexBet" v-for="(item2,index2) in item.paramList" :key="index2"
											:class="[index2 == (item.paramList.length -1)?'':'borderBottom']"
											style="line-height: 40px;padding: 0 17px;">
											<div class="font14" style="color:#fff">{{item2.parameterName}}</div>
											<div class="font14" :style="{'color':item2.status  == 'ABNORMAL'?'#FF537B':'#75E7FF'}">
												{{item2.latestAmount}}{{item2.unitCode}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div style="width:100%;height: 440px;background: #041C62;" class="mt10">
					<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);"
						class="displayFlex mb14">
						<div class="font18 point" @click="selectedContent = '危险废物'" style="padding: 0 20px;"
							:class="[selectedContent == '危险废物'?'selectedClass':'']"
							:style="{'color':selectedContent == '危险废物'?'#fff':'#679EFF'}">危险废物</div>
						<div class="font18 point pa20" @click="selectedContent = '一般工业固废'" style="padding: 0 20px;"
							:class="[selectedContent == '一般工业固废'?'selectedClass':'']"
							:style="{'color':selectedContent == '一般工业固废'?'#fff':'#679EFF'}">一般工业固废</div>
					</div>

					<div style="display: flex;justify-content: space-between;" v-show="selectedContent == '危险废物'"
						class="point" @click="openUrl('/waste/wasteDashboard')">
						<div style="flex:1;">
							<div style="position: relative;height:200px">
								<div id="pieChart1" style="width:235px;height:230px"></div>
								<div style="position: absolute;left: 0;right: 0;top: 65px;" class="textCenter">
									<div style="color: #FFA200;" class="font16">资源利用率</div>
									<div style="color: #fff;" class="font24 mt5">
										{{data22.disposeMethodPercent}}%
									</div>
								</div>
							</div>

							<div
								style="margin-top: -60px;color:#FFA200;margin: 0 22px 20px;border-bottom: 1px solid#1649A4;padding-bottom: 20px;"
								class="mb15 font14 displayFlexBet">
								<div class="font16 colorfff">资源化利用</div>
								<div class="font24">
									<span class="font24">{{data22.disposeMethodQty}}</span>
									<span class="font14"></span>
								</div>
							</div>

							<div style="margin-top: -0px;height: 240px;overflow-y: auto;">
								<div v-for="(item,index) in data22.disposeMethodList"
									style="color:#FFA200;margin: 0 22px 20px;border-bottom: 1px solid#1649A4;padding-bottom: 20px;"
									class="mb15 font14 displayFlexBet">
									<div class="font16 colorfff">{{item.wasteName}}</div>
									<div class="font24">
										<span class="font24">{{item.amount}}</span>
										<span class="font14">{{item.unitValue}}</span>
									</div>
								</div>
							</div>
						</div>

						<div style="flex:3" class="ml10">
							<div style="display: flex;justify-content: space-between;">
								<div style="flex: 1;height:240px;display: flex;" class="pad20 mr10 bra16">
									<div :style="{'backgroundImage':'url('+require('../assets/bigScreen/icon12.png')+')'}"
										style="color: #fff;background-size: 100% 100%;background-repeat: no-repeat;width: 51px;height: 38px;line-height: 38px;padding-left: 7px;"
										class="colorfff font16 mt30">
										产生
									</div>
									<div id="pieChart2" style="width:calc(100% - 51px);height:100%"></div>
								</div>

								<div style="flex: 1;height:240px;display: flex;" class="pad20 bra16">
									<div :style="{'backgroundImage':'url('+require('../assets/bigScreen/icon12.png')+')'}"
										style="color: #fff;background-size: 100% 100%;background-repeat: no-repeat;width: 51px;height: 38px;line-height: 38px;padding-left: 7px;"
										class="colorfff font16 mt30">
										库存
									</div>

									<div style="flex: 1;">
										<div class="progress-bar" style="margin: 0 auto;position:relative">
											<div class="progress"
												:style="{'height':(data22.storageQty/data22.designStorageQty)>1?'100%':(data22.storageQty/data22.designStorageQty)*100+'%'}">
											</div>
											<div style="position:absolute;left:0;right:0;"
												:style="{'bottom':(data22.storageQty/data22.designStorageQty)>1?'50%':(data22.storageQty/data22.designStorageQty)*100+'%'}"
												class="textCenter colorfff">{{data22.storageQty}}吨</div>
										</div>
									</div>
									<div style="height:150px;overflow-y: auto;flex: 1;">
										<div v-for="(item,index) in data22.disposeMethodList" style="display: flex;color:#fff"
											class="mb15 font14">
											<div class="mr10" style="color:#FFA200">|</div>
											<div>
												<div class="mb5">{{item.wasteName}}</div>
												<div class="font16">{{item.amount}}{{item.unitValue}}</div>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div style="padding-right: 20px;">
								<div class="colorfff font16 mb10 textCenter"
									style="background-size: 100% 100%;background-repeat: no-repeat;width: 78px;height: 32px;line-height: 28px;"
									:style="{'backgroundImage':'url('+require('../assets/bigScreen/icon13.png')+')'}">处置利用</div>
								<div style="width: 100%;" class="mb20">
									<div v-for="(item,index) in data22.disposeWasteList" class="pl5"
										:style="{'background':item.bgColor,'width':item.per+'%'}"
										style="display: inline-block;height: 20px;color: #fff;">{{item.per}}%</div>
								</div>
								<div style="display: flex;">
									<div v-for="(item,index) in data22.disposeWasteList"
										style="display: flex;color:#fff;align-items: center;width:25%" class="font14">
										<div :style="{'borderLeft':'2px solid'+item.bgColor}" style="padding-left: 10px;"
											class="mr20">
											<div class="mb5 font14">{{item.wasteName}}</div>
											<div class="font16">{{item.amount}}{{item.unitValue}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div style="display: flex;justify-content: space-between;" class="point"
						@click="openUrl('/swEntWaste/order')" v-show="selectedContent == '一般工业固废'">
						<div style="flex:1;">
							<div style="position: relative;height:200px">
								<div id="pieChart11" style="width:235px;height:230px"></div>
								<div style="position: absolute;left: 0;right: 0;top: 65px;" class="textCenter">
									<div style="color: #36B37E;" class="font16">资源利用率</div>
									<div style="color: #fff;" class="font24 mt5">
										{{data33.disposeMethodPercent}}%
									</div>
								</div>
							</div>

							<div style="margin-top: -60px;height: 240px;overflow-y: auto;">
								<div v-for="(item,index) in data33.disposeMethodList"
									style="color:#36B37E;margin: 0 22px 20px;border-bottom: 1px solid#1649A4;padding-bottom: 20px;"
									class="mb15 font14 displayFlexBet">
									<div class="font16 colorfff">{{item.wasteName}}</div>
									<div class="font24">
										<span class="font24">{{item.amount}}</span>
										<span class="font14">{{item.unitValue}}</span>
									</div>
								</div>
							</div>
						</div>

						<div style="flex:3" class="ml10">
							<div style="display: flex;justify-content: space-between;">
								<div style="flex: 1;height:240px;display: flex;" class="pad20 mr10 bra16">
									<div :style="{'backgroundImage':'url('+require('../assets/bigScreen/icon12.png')+')'}"
										style="color: #fff;background-size: 100% 100%;background-repeat: no-repeat;width: 51px;height: 38px;line-height: 38px;padding-left: 7px;"
										class="colorfff font16 mt30">
										产生
									</div>
									<div id="pieChart22" style="width:250px;height:240px"></div>
								</div>

								<div style="flex: 1;height:240px;display: flex;" class="pad20 bra16">
									<div :style="{'backgroundImage':'url('+require('../assets/bigScreen/icon12.png')+')'}"
										style="color: #fff;background-size: 100% 100%;background-repeat: no-repeat;width: 51px;height: 38px;line-height: 38px;padding-left: 7px;"
										class="colorfff font16 mt30">
										库存
									</div>

									<div style="flex: 1;">
										<div class="progress-bar2" style="margin: 0 auto;position:relative">
											<div class="progress"
												:style="{'height':(data22.designStorageQty/data22.storageQty)>1?'100%':(data22.designStorageQty/data22.storageQty)*100+'%'}">
											</div>
											<div style="position:absolute;left:0;right:0;"
												:style="{'bottom':(data22.designStorageQty/data22.storageQty)>1?'50%':(data22.designStorageQty/data22.storageQty)*100+'%'}"
												class="textCenter colorfff">{{data22.storageQty}}吨</div>
										</div>
									</div>
									<div style="height:150px;overflow-y: auto;flex: 1;">
										<div v-for="(item,index) in data22.disposeMethodList" style="display: flex;color:#fff"
											class="mb15 font14">
											<div class="mr10" style="color:#36B37E">|</div>
											<div>
												<div class="mb5">{{item.wasteName}}</div>
												<div class="font16">{{item.amount}}{{item.unitValue}}</div>
											</div>
										</div>
									</div>
								</div>
							</div>


							<div style="padding-right: 20px;">
								<div class="colorfff font16 mb10 textCenter"
									style="background-size: 100% 100%;background-repeat: no-repeat;width: 78px;height: 32px;line-height: 28px;"
									:style="{'backgroundImage':'url('+require('../assets/bigScreen/icon13.png')+')'}">处置利用</div>
								<div style="width: 100%;" class="mb20">
									<div v-for="(item,index) in data22.disposeWasteList" class="pl5"
										:style="{'background':item.bgColor,'width':item.per+'%'}"
										style="display: inline-block;height: 20px;color: #fff;">{{item.per}}%</div>
								</div>
								<div style="display: flex;">
									<div v-for="(item,index) in data22.disposeWasteList"
										style="display: flex;color:#fff;align-items: center;width:25%" class="font14">
										<div :style="{'borderLeft':'2px solid'+item.bgColor}" style="padding-left: 10px;"
											class="mr20">
											<div class="mb5 font14">{{item.wasteName}}</div>
											<div class="font16">{{item.amount}}{{item.unitValue}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			<div style="width: 450px;">
				<div style="width:100%;height: 314px;background: #041C62;">
					<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);">
						<div class="inset-box">生产总览</div>
					</div>

					<div style="color:#fff;overflow-y: auto;" class="point" @click="openUrl('/produceManage/order')">
						<div class="displayFlexBet" style="padding: 0 15px 0 15px;">
							<div style="flex: 1;margin-top: 40px;" class="textCenter">
								<div
									style="background-size: 100% 100%;width: 112px;height: 66px;margin: 0 auto;position: relative;"
									:style="{'backgroundImage':'url('+require('../assets/bigScreen/icon7.png')+')'}">
									<div
										style="color:#fff;font-size:24px;font-weight: bold;position: absolute;top: -20px;left: 0;right: 0;"
										class="textCenter">
										{{ data4.yearQty || 0 }}
									</div>
								</div>
								<div style="font-size:17px">年度产量</div>
							</div>

							<div style="flex: 1;margin-top: 40px;" class="textCenter">
								<div
									style="background-size: 100% 100%;width: 112px;height: 66px;margin: 0 auto;position: relative;"
									:style="{'backgroundImage':'url('+require('../assets/bigScreen/icon7.png')+')'}">
									<div
										style="color:#fff;font-size:24px;font-weight: bold;position: absolute;top: -20px;left: 0;right: 0;"
										class="textCenter">
										{{ data4.monthQty || 0 }}
									</div>
								</div>
								<div style="font-size:17px">月度产量</div>
							</div>
						</div>
						<div ref="chart2" style="width:100%;height:134px"></div>
					</div>
				</div>

				<div style="width:100%;height: 184px;background: #041C62;" class="mt10">
					<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);" class="displayFlex">
						<div class="inset-box">视频监控</div>
						<div style="color: #FE0F47;" v-if="mock.mock8">（模拟数据）</div>
					</div>

					<div style="position: relative;overflow-x: hidden;padding:0 0 0 30px;width: calc(100% - 30px);"
						class="swiper-container mt12 point" @click="openUrl('/videoMonitor/home')">
						<div style="color:#fff;display: flex;" class="swiper-wrapper">
							<div v-for="(item,index) in data8" style="width: 160px;" class="mr25 swiper-slide">
								<img :src="imgUrl + item.coverFileId" style="width:160px;height: 90px;" />
								<div style="color: #75E7FF;font-size: 14px;margin-top: 6px;">{{item.equipmentPosition}}</div>
							</div>
						</div>
					</div>
				</div>

				<div style="width:100%;height: 252px;background: #041C62;" class="mt10">
					<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);" class="displayFlex">
						<div class="inset-box">清洁运输</div>
						<div style="color: #FE0F47;" v-if="mock.mock5">（模拟数据）</div>
					</div>

					<div style="color:#fff;position: relative;" class="mt15 point"
						@click="openUrl('/cleanTransportation/transportDashboard')">
						<div id="main" style="width:100%;height:88px;padding:0 30px;"></div>
						<div class="mt20 ml20" style="color: #fff;background-size:100% 100%;background-repeat: no-repeat;position: relative;
												height: 79px;width: 247px;" :style="{ 'background-image': 'url(' + publicPath + '/images/sIcon15.png)' }">
							<div style="font-size: 18px;position: absolute;top: 35px;right: 70px;">{{ data5.totalNum }}</div>
							<div style="font-size: 18px;position: absolute;top: 0px;right: 70px;color: #75E7FF;"
								class="font14">
								进出场车次</div>
						</div>
					</div>
				</div>

				<div style="width:100%;height:215px;background: #041C62;" class="mt10">
					<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);" class="displayFlex">
						<div class="inset-box">碳标签</div>
						<div style="color: #FE0F47;" v-if="mock.mock7">（模拟数据）</div>
					</div>

					<div style="color:#fff;display:flex;padding-left:30px" class="mt15">
						<div class="textCenter">
							<div>
								<img src="../assets/sIcon171.png" style="width: 76px;height: 88px;" />
							</div>
							<div class="colorfff">
								<span class="font20">{{total.toFixed(2)}}</span>
								<span class="font14">kg</span>
							</div>
						</div>
						<div style="width: calc(100% - 86px);height: 140px;overflow-y: hidden;" class="swiper-container3">
							<div class="swiper-wrapper">
								<div v-for="(item,index) in data7" :key="index" class="displayFlexBet mb20 swiper-slide">
									<div style="width: 80px;text-align: right;">{{item.name}}</div>
									<div style="width: calc(100% - 100px);">
										<div class="displayFlex">
											<el-progress style="width: 64%;" :showText="false" :percentage="item.per"
												strokeLinecap="square" textColor="#75E7FF" :stroke-width="8"
												defineBackColor="#1E3372"></el-progress>
											<span class="ml10 font14" style="color:#75E7FF;">{{item.per}}%</span>
										</div>
										<div class="colorfff">
											<span class="font14">{{item.cQty}}</span>
											<span class="font10">kg</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- </AutoScalContainer> -->
	</v-scale-screen>
</template>

<script>
	import {
		Session
	} from '@/utils/storage.js';
	import elProgress from '@/components/progress'
	import Swiper from 'swiper'; // 注意引入的是Swiper
	import 'swiper/css/swiper.min.css' // 注意这里的引入

	let that
	import * as echarts from 'echarts';
	import moment from 'moment'
	import lineCom from '@/components/bigScreen/lineCom'
	import wufie from '@/components/bigScreen/wufie'
	import gufei from '@/components/bigScreen/gufei'
	import fqcdpf from '@/components/bigScreen/fqcdpf'
	import fqcdpf2 from '@/components/bigScreen/fqcdpf2'
	import dtsc from '@/components/bigScreen/dtsc'
	import riskPreview from '@/components/bigScreen/riskPreview'
	import timeLine from '@/components/bigScreen/timeLine'
	import wfcx from '@/components/bigScreen/wfcx'

	export default {
		components: {
			//vue3dLoader,
			elProgress,
			lineCom,
			wufie,
			gufei,
			fqcdpf,
			fqcdpf2,
			dtsc,
			riskPreview,
			timeLine,
			wfcx
		},
		data() {
			return {
				setting: this.$store.state.userInfos.setting,
				options: ['无废工厂', '危废管理', '一般工业固废管理', '无废工厂建设方案', '无废工厂建设成效'],
				loading4: false,
				loading5: false,
				outletId: '',
				outletList: [],
				selectType: 'CEMS',
				selectType2: 'DISORGANIZED_OUTLET',
				selectItem: '实时环境监测',
				selectItem2: "在线监测",
				data1: [],
				data2: {},
				data3: [],
				data4: {},
				data5: {},
				data6: {},
				data7: {},
				data8: [],
				data9: [],
				data22: {
					wasteData: [],
					storageData: []
				},
				data33: {
					wasteData: [],
					storageData: []
				},
				dataList5: {},
				dataList6: {},
				dataList7: {},
				publicPath: 'https://demo-1254184403.cos.ap-chengdu.myqcloud.com',
				imgUrl: "https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=",
				lights: [{
					type: "AmbientLight",
					color: "#fff",
					intensity: 2,
				}],
				scale: [
					[{
						x: 800,
						y: 800,
						z: 800
					}]
				],
				labels: [{
					image: "https://demo-1254184403.cos.ap-chengdu.myqcloud.com/images/dizuo.png ",
					position: {
						x: -0.5,
						y: 0.15,
						z: 0
					},
					scale: {
						x: 0.1,
						y: 0.3,
						z: 0.4
					},
					sid: 1, // custom id
				}, {
					text: "厂界（西南）",
					position: {
						x: 0.1,
						y: -0.05,
						z: 0
					},
					scale: {
						x: 1.5,
						y: 0.8,
						z: 0
					},
					textStyle: {
						fontFamily: "Arial",
						fontSize: 10,
						fontWeight: 600,
						lineHeight: 1,
						color: "#ffffff",
						borderWidth: 1,
						borderRadius: 0,
						borderColor: "#75E7FF",
						backgroundColor: "#031F5F",
					},
					sid: 2, // 自定义标识，可有可无
				}],
				total: 0,
				productionList: [],
				params: {
					equipmentId: ''
				},
				selectedContent: '危险废物',
				selectedContent2: '',
				mock: {
					mock1: false,
					mock2: false,
					mock3: false,
					mock4: false,
					mock5: false,
					mock6: false,
					mock7: false,
					mock8: false,
				}
			}
		},
		mounted() {
			that = this
			//console.log(that.setting)
			that.getGasDisOrganizedMonitorDet()
			that.getGasWarningList()
			that.getProductQtyData()
			that.countCleanTransportationDoor()
			that.countCompleteData()
			that.getGasRiskList()
			that.getListByEntId()
			that.getPollutionDayCharts()
			that.getGasOnlineLatestMonitorByOutletIdV2()
			that.getHomePageHwWasteAmountInfo()
			that.ajax({
				url: '/productionEquipment/pageProductionEquipmentBase?pageIndex=1&pageSize=50&ticketId=' + that.$store
					.state.token,
				data: JSON.stringify({
					ticketId: that.$store.state.token
				}),
				contentType: 'application/json',
				success: function(result) {
					if (result.data) {
						that.productionList = result.data.records
						if (that.productionList.length > 0 && !that.params.equipmentId) that.params.equipmentId = that
							.productionList[0].id
						that.countEquipRunTime()
						that.getWaterEquipRunList()
						that.getGasEquipRunList()

					}
				},
			})
		},
		methods: {

			openUrl(url) {
				if (process.env.NODE_ENV === 'production') {
					window.open('http://bbep.cc/#' + url);
				} else {
					window.open('http://localhost:9999/#' + url);
				}
			},

			gotoDet(item) {
				if (item.businessType == 'WASTE_GAS') that.openUrl('/wasteGas/warningCenterDet?id=' + item.id)
				if (item.businessType == 'WASTE_WATER') that.openUrl('/wasteWater/warningCenterDet?id=' + item.id)
				if (item.businessType == 'PROBLEM') that.openUrl('/problemTicketDet?id=' + item.id)
			},

			getData(item) {
				that.params.equipmentId = item.id
				that.countEquipRunTime()
				that.getWaterEquipRunList()
				that.getGasEquipRunList()
			},

			getWaterEquipRunList() {
				that.ajax({
					url: '/productionEquipment/stdBook/getWaterEquipRunList',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: moment().format('YYYY-MM-DD')
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							if (item.paramList && item.paramList.length) {
								for (let item2 of item.paramList) {
									if (item2.status == 'NORMAL') item2.bg = "#F6F7FB"
									if (item2.status == 'HISTORY_ABNORMAL') item2.bg = "##FFF8C4"
									if (item2.status == 'ABNORMAL') item2.bg = "##D10633"
								}
							}
						}
						that.dataList7 = result.data
					},
				})
			},

			getGasEquipRunList() {
				that.ajax({
					url: '/productionEquipment/stdBook/getGasEquipRunList',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: moment().format('YYYY-MM-DD')
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							if (item.paramList && item.paramList.length) {
								for (let item2 of item.paramList) {
									if (item2.status == 'NORMAL') item2.bg = "#F6F7FB"
									if (item2.status == 'HISTORY_ABNORMAL') item2.bg = "##FFF8C4"
									if (item2.status == 'ABNORMAL') item2.bg = "##D10633"
								}
							}
						}
						that.dataList6 = result.data
					},
				})
			},

			countEquipRunTime() {
				that.ajax({
					url: '/productionEquipment/stdBook/getProdEquipRunList',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: moment().format('YYYY-MM-DD')
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList5 = result.data
					},
				})
			},

			getHomePageHwWasteAmountInfo() {
				that.loading4 = true
				that.loading5 = true
				that.ajax({
					url: 'hw/warehouseReceipt/getHomePageHwWasteAmountInfo',
					contentType: 'application/json',
					data: JSON.stringify({}),
					success: function(result) {
						if (result.data) {
							that.data22 = result.data
							result.data.monthData = result.data.monthData || []
							result.data.disposeMethodPercent = result.data.disposeMethodPercent || 0
							result.data.produceList = result.data.produceList || []
							result.data.disposeWasteList = result.data.disposeWasteList || []
							let total = 0
							for (let item of result.data.produceList) {
								item.name = item.wasteName
								item.value = Number(item.amount)
							}
							for (let item of result.data.disposeWasteList) {
								total += Number(item.amount)
							}
							for (let index in result.data.disposeWasteList) {
								let item = result.data.disposeWasteList[index]
								item.per = Number(((Number(item.amount) / total) * 100).toFixed(1))
								if (index == 0) item.bgColor = "#6758F3"
								if (index == 1) item.bgColor = "#33AA44"
								if (index == 2) item.bgColor = "#1565D8"
								if (index == 3) item.bgColor = "#D1D1D1"
							}

							setTimeout(function() {
								that.formPieChart("pieChart1", result.data.disposeMethodPercent)
								that.formPieRchart("pieChart2", result.data.produceList)
							}, 500);
							that.loading4 = false
						}
					},
				})

				that.ajax({
					url: 'sw/warehouseReceipt/getHomePageSwWasteAmountInfo',
					contentType: 'application/json',
					data: JSON.stringify({}),
					success: function(result) {

						if (result.data) {
							that.data33 = result.data
							result.data.monthData = result.data.monthData || []
							result.data.disposeMethodPercent = result.data.disposeMethodPercent || 0
							result.data.produceList = result.data.produceList || []
							result.data.disposeWasteList = result.data.disposeWasteList || []
							let total = 0
							for (let item of result.data.produceList) {
								item.name = item.wasteName
								item.value = Number(item.amount)
							}
							for (let item of result.data.disposeWasteList) {
								total += Number(item.amount)
							}
							for (let index in result.data.disposeWasteList) {
								let item = result.data.disposeWasteList[index]
								item.per = Number(((Number(item.amount) / total) * 100).toFixed(3))
								if (index == 0) item.bgColor = "#6758F3"
								if (index == 1) item.bgColor = "#33AA44"
								if (index == 2) item.bgColor = "#1565D8"
								if (index == 3) item.bgColor = "#D1D1D1"
							}

							setTimeout(function() {
								that.formPieChart("pieChart11", result.data.disposeMethodPercent,
									false)
								that.formPieRchart("pieChart22", result.data.produceList, true)
							}, 500);
							that.loading5 = false
						}
					},
				})
			},

			getPollutionDayCharts() {
				that.ajax({
					url: 'oneMap/getPollutionDayCharts',
					data: {
						outletApproach: that.selectType2 // 固定值，有组织排放
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {
						let data1 = []
						let data2 = []
						let data3 = []
						if (res.data && res.data.length) {
							for (let item of res.data[0].dataList) {
								data1.push(item.dateStr)
							}
							let colors = ["#00FF2A", "#FFC000", "#53399D"]
							for (let index in res.data) {
								let item = res.data[index]
								data3.push(item.pollutionName)
								data2[index] = {
									name: item.pollutionName,
									data: [],
									type: 'line',
									smooth: true,
									showSymbol: false,
									lineStyle: {
										color: colors[index] // 设置线的颜色为红色
									}
								}
								for (let item2 of item.dataList) {
									data2[index].data.push(item2.totalAmount)
								}
							}
						}
						//console.log(data3)
						var chartDom = document.getElementById('categoryChart2');
						var myChart = echarts.init(chartDom);
						var option;

						option = {
							tooltip: {
								trigger: 'axis'
							},
							legend: {
								data: data3,
								x: 'right',
								textStyle: {
									color: '#ffffff' //字体颜色
								},
							},
							title: {
								text: '日平均排放趋势',
								textStyle: { // 标题美化
									color: '#75E7FF',
									fontSize: 14,
								}
							},
							xAxis: {
								type: 'category',
								data: data1,
								axisLabel: {
									fontSize: 13 //设置坐标轴文本标签的字体大小
								},
								axisLine: { //坐标轴轴线
									show: false,
									lineStyle: {
										color: '#367FFF' // 设置为红色
									}
								},
								axisTick: { //坐标轴刻度
									show: false
								}
							},
							grid: {
								left: 20, // 左侧内边距
								right: 20, // 右侧内边距
								top: 27, // 顶部内边距
								bottom: 20 // 底部内边距
							},
							yAxis: {
								type: 'value',
								splitLine: { //坐标轴在grid区域中的分割线
									show: false
								},
								axisLabel: { //坐标轴刻度标签
									show: false
								},
							},
							series: data2
						};
						myChart.clear(); //清空
						option && myChart.setOption(option);
					}
				})
			},

			getGasOnlineLatestMonitorByOutletIdV2(content = '实时环境监测') {
				if (content) {
					if (that.selectItem != content) that.outletId = ''
					that.selectItem = content
				}
				if (content == '实时环境监测') {
					that.ajax({
						url: 'oneMap/getActualGasMonitorDet',
						data: {
							outletId: that.outletId
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							let thisData = result.data

							if (!that.outletId) that.outletId = thisData[0].outletId
							that.data1 = thisData
							that.mock.mock1 = result.mock
						}
					})
				}
				if (content == '自行环境监测') {
					that.ajax({
						url: 'oneMap/getManualMonitorDet',
						data: {
							outletId: that.outletId
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							let thisData = result.data

							if (!that.outletId) that.outletId = thisData[0].outletId
							that.data1 = thisData
							that.mock.mock1 = result.mock
						}
					})
				}
			},

			countCompleteData() {
				that.ajax({
					url: 'oneMap/getMaterialCQtyList',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {
						//console.log(res.mock)
						that.mock.mock7 = res.mock
						that.total = res.data.reduce((accumulator, currentItem) => accumulator + currentItem.cQty,
							0);
						for (let item of res.data) {
							item.per = Number(((item.cQty / that.total) * 100).toFixed(2))
						}
						that.data7 = res.data

						setTimeout(function() {
							var swiperInstance = new Swiper('.swiper-container3', {
								direction: 'vertical',
								loop: true, // 无缝
								autoplay: { //自动开始
									delay: 2500, //时间间隔
									disableOnInteraction: false, //*手动操作轮播图后不会暂停*
								},

								slidesPerView: 3, // 一组三个
								spaceBetween: 25,
								paginationClickable: true,
								// navigation: {
								// 	nextEl: '.swiper-button-next',
								// 	prevEl: '.swiper-button-prev',
								// },
								// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
								observer: true,
								observeParents: true,
								lazy: {
									loadPrevNext: true,
								},
							})
						}, 100)
						console.log("碳标签", that.data7)
					}
				})
			},

			countCleanTransportationDoor() {
				that.ajax({
					url: 'oneMap/countCleanTransportationDoor',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {
						that.data5 = res.data
						that.mock.mock5 = res.mock

						for (let item of res.data.list) {
							item.name = item.name
							item.value = item.num
						}
						//console.log("清洁运输", that.data5)

						var chartDom = document.getElementById('main');
						var myChart = echarts.init(chartDom);
						var option;

						option = {
							tooltip: {
								trigger: 'item'
							},
							legend: {
								orient: 'vertical',
								left: 10,
								top: 20,
								bottom: 20,
								textStyle: {
									color: '#fff' // 这里设置图例文字的颜色为红色
								},
								formatter(name) {
									let info = res.data.list.find((item) => item.name == name);

									return `${name}\r${info.value}`;
								},
							},

							series: [{
								name: '',
								type: 'pie',
								center: ['75%', '50%'],
								radius: ['50%', '90%'],
								label: {
									show: false,
									position: 'center'
								},
								labelLine: {
									show: false
								},
								data: res.data.list,
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						};

						option && myChart.setOption(option);

					},
				})
			},

			getProductQtyData() {
				that.ajax({
					url: 'oneMap/getProductQtyData',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {

						if (!res.data) return false
						that.data4 = res.data
						console.log("生产总览", that.data4)

						let xAxisData = []
						let seriesData = []
						for (let item of res.data.monthList) {
							xAxisData.push(item.monthStr)
							seriesData.push(item.qty)
						}

						const chartInstance = echarts.init(that.$refs.chart2);
						const option = {
							tooltip: {
								trigger: 'axis'
							},
							xAxis: {
								type: 'category',
								data: xAxisData,
								axisLabel: {
									fontSize: 13 //设置坐标轴文本标签的字体大小
								},
								axisLine: { //坐标轴轴线
									show: false,
									lineStyle: {
										color: '#367FFF' // 设置为红色
									}
								},
								axisTick: { //坐标轴刻度
									show: false
								}
							},
							grid: {
								left: 20, // 左侧内边距
								right: 20, // 右侧内边距
								top: 20, // 顶部内边距
								bottom: 20 // 底部内边距
							},
							yAxis: {
								type: 'value',
								splitLine: { //坐标轴在grid区域中的分割线
									show: false
								},
								axisLabel: { //坐标轴刻度标签
									show: false
								},
							},
							series: [{
								data: seriesData,
								type: 'line',
								smooth: false,
								symbol: "none",
								areaStyle: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#FF355A' // 渐变起始颜色
									}, {
										offset: 1,
										color: '#041452' // 渐变结束颜色
									}])
								},
								lineStyle: {
									color: '#FF355A', // 折线颜色
									width: 1, // 折线宽度
								}

							}]
						};
						chartInstance.setOption(option);
					}
				});
			},

			getGasRiskList() {
				that.ajax({
					url: 'oneMap/getAiInspect',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.mock.mock6 = result.mock
						let dataList = result.data
						let newDataList = []
						for (let key in dataList) {
							let thisItem = {
								title: '',
								score: 0
							}
							if (key == 'disorganizedScore') {
								thisItem.title = '无组织排放'
								thisItem.score = dataList[key]
							}
							if (key == 'docScore') {
								thisItem.title = '环保制度'
								thisItem.score = dataList[key]
							}
							if (key == 'stdBookScore') {
								thisItem.title = '环境台账'
								thisItem.score = dataList[key]
							}
							if (key == 'cleanTranScore') {
								thisItem.title = '清洁运输'
								thisItem.score = dataList[key]
							}
							if (key == 'machineScore') {
								thisItem.title = '处置设备运行'
								thisItem.score = dataList[key]
							}
							if (key == 'organizedScore') {
								thisItem.title = '有组织排放'
								thisItem.score = dataList[key]
							}
							newDataList.push(thisItem)
						}
						that.data6 = newDataList
						console.log("AI巡检", that.data6)

						let chartDom = document.getElementById("main2");
						let myChart = echarts.init(chartDom);
						let option;
						let names = []
						let datas = []
						let legendData = []

						for (let item of newDataList) {
							//console.log(item)
							legendData.push(item.title)
							names.push({
								name: '',
								max: 5
							})
							datas.push(item.score)
						}

						option = {
							legend: {
								show: true,
								data: legendData
							},
							radar: {
								indicator: names,
								center: ['45%', '50%'],
								radius: '100%', // 半径
								splitArea: {
									//分隔区域
									show: true, // 是否显示分隔区域, 默认true
									areaStyle: {
										// 分隔区域的样式 (淡蓝色)
										color: '#296197'
									}
								},

								splitLine: {
									//分隔线
									show: false, //默认数值轴显示，类目轴不显示
									lineStyle: {
										// 分隔线的样式 (淡蓝色)
										color: 'rgba(255, 0, 255, 0.2)'
									}
								},
							},
							series: [{
								name: '',
								type: 'radar',

								data: [{
									value: datas,
									name: 'name',
									areaStyle: {
										color: "#fff"
									},
									label: {
										show: true,
										formatter: function(params) {
											return params.value;
										}
									}
								}]
							}]
						};

						option && myChart.setOption(option);
					}
				})
			},

			getListByEntId() {
				that.ajax({
					url: 'video/monitor/equipment/getListByEntId',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.data8 = result.data
						that.mock.mock8 = result.mock

						setTimeout(function() {
							var swiperInstance = new Swiper('.swiper-container', {
								loop: true, // 无缝
								autoplay: { //自动开始
									delay: 2500, //时间间隔
									disableOnInteraction: false, //*手动操作轮播图后不会暂停*
								},
								slidesPerView: 2.3, // 一组三个
								spaceBetween: 20,
								paginationClickable: true,
								// navigation: {
								// 	nextEl: '.swiper-button-next',
								// 	prevEl: '.swiper-button-prev',
								// },
								// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
								observer: true,
								observeParents: true,
								lazy: {
									loadPrevNext: true,
								},
							})
						}, 100)
					}
				})
			},


			getGasDisOrganizedMonitorDet() {
				if (that.selectItem2 == '在线监测') {
					that.ajax({
						url: 'oneMap/getGasMonitorDet',
						data: {
							outletApproach: that.selectType2
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							that.data2 = result.data
						},
					})
				} else {
					that.ajax({
						url: 'oneMap/countManualSurveyPollution',
						data: {
							outletApproach: that.selectType2
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(res) {
							that.data2 = res.data

							let data1 = []
							let data2 = []
							let data3 = []
							if (res.data && res.data.chartData.length) {
								for (let item of res.data.chartData[0].dataList) {
									data1.push(item.monthStr)
								}
								let colors = ["#00FF2A", "#FFC000", "#53399D"]
								for (let index in res.data.chartData) {
									let item = res.data.chartData[index]
									data3.push(item.pollutionName)
									data2[index] = {
										name: item.pollutionName,
										data: [],
										type: 'line',
										smooth: true,
										showSymbol: false,
										lineStyle: {
											color: colors[index] // 设置线的颜色为红色
										}
									}
									for (let item2 of item.dataList) {
										data2[index].data.push(item2.qty)
									}
								}
							}
							//console.log(data3)
							var chartDom = document.getElementById('categoryChart2');
							var myChart = echarts.init(chartDom);
							var option;

							option = {
								tooltip: {
									trigger: 'axis'
								},
								legend: {
									data: data3,
									x: 'right',
									textStyle: {
										color: '#ffffff' //字体颜色
									},
								},
								title: {
									text: '日平均排放趋势',
									textStyle: { // 标题美化
										color: '#75E7FF',
										fontSize: 14,
									}
								},
								xAxis: {
									type: 'category',
									data: data1,
									axisLabel: {
										fontSize: 13 //设置坐标轴文本标签的字体大小
									},
									axisLine: { //坐标轴轴线
										show: false,
										lineStyle: {
											color: '#367FFF' // 设置为红色
										}
									},
									axisTick: { //坐标轴刻度
										show: false
									}
								},
								grid: {
									left: 20, // 左侧内边距
									right: 20, // 右侧内边距
									top: 27, // 顶部内边距
									bottom: 20 // 底部内边距
								},
								yAxis: {
									type: 'value',
									splitLine: { //坐标轴在grid区域中的分割线
										show: false
									},
									axisLabel: { //坐标轴刻度标签
										show: false
									},
								},
								series: data2
							};
							myChart.clear(); //清空
							option && myChart.setOption(option);
						},
					})
				}

			},

			getGasWarningList() {
				that.ajax({
					url: 'oneMap/getSimpleWarningList',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.data3 = result.data
						that.mock.mock3 = result.mock

						setTimeout(function() {
							var swiperInstance = new Swiper('.swiper-container2', {
								direction: 'vertical',
								loop: true, // 无缝
								autoplay: { //自动开始
									delay: 2500, //时间间隔
									disableOnInteraction: false, //*手动操作轮播图后不会暂停*
								},

								slidesPerView: 6, // 一组三个
								spaceBetween: 25,
								paginationClickable: true,
								// navigation: {
								// 	nextEl: '.swiper-button-next',
								// 	prevEl: '.swiper-button-prev',
								// },
								// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
								observer: true,
								observeParents: true,
								lazy: {
									loadPrevNext: true,
								},
							})
						}, 100)
					},
				})
			},

			formPieRchart(chartId, dataList, isGreen = false) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;
				let legendData = []
				for (let item of dataList) {
					legendData.push(item.name)
				}

				option = {
					title: {},
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						itemWidth: 2,
						itemHeight: 28,
						right: 0,
						top: 0,
						bottom: 0,
						//icon: 'circle',
						formatter: function(name) { // 添加
							let total = 0
							let target
							for (let i = 0; i < dataList.length; i++) {
								total += dataList[i].value
								if (dataList[i].name === name) {
									target = dataList[i].value
								}
							}
							var arr = [
								'{a|' + name + '}\n' + '{c|' + target + '}'
							]
							return arr.join('  ')
						},
						textStyle: { // 添加
							padding: [8, 0, 0, 0],
							rich: {
								a: {
									color: '#fff',
									fontSize: 14,
									width: 110
								},
								c: {
									fontSize: 16,
									color: '#fff',
									lineHeight: 30
								}
							}
						}
					},
					color: isGreen ? ['#36B37E', '#04E38A', '#9DFF86', '#DDDDE4'] : ['#CC0236',
						'#FF5400', '#FFA200', '#DDDDE4'
					],
					series: [{
						type: 'pie',
						radius: [20, 50],
						center: ['35%', '25%'],
						roseType: 'radius',
						itemStyle: {
							borderRadius: 5
						},
						label: {
							show: false
						},
						emphasis: {
							label: {
								show: true
							}
						},
						data: dataList
					}]
				};

				option && myChart.setOption(option);
			},

			formPieChart(chartId, value = 0) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						offset: 0,
						color: '#FD4851'
					},
					{
						offset: 0.2,
						color: '#FF8C54'
					},
					{
						offset: 0.4,
						color: '#FFDE00'
					},
					{
						offset: 0.6,
						color: '#33D5AC'
					},
					{
						offset: 0.8,
						color: '#0878F5'
					},
					{
						offset: 1,
						color: '#0878F5'
					}
				]);
				// colorSet倒过来
				const colorSet = [
					[0.1, '#FF0000'],
					[1, color]
				];

				option = {
					series: [{
						type: 'gauge',
						startAngle: 0,
						endAngle: 180,
						min: 240, // min和max倒过来
						max: 0,
						splitNumber: 8,
						clockwise: false, // 设置数据逆时针增长
						itemStyle: {
							color: '#eee', // 用于替代背景色的颜色
							borderColor: '#eee' // 用跟上面一样的颜色遮住露出的背景色
						},
						progress: {
							show: true,
							roundCap: false, // 只适用于平角
							width: 20
						},
						emphasis: {
							// 禁用高亮（从v5.3.0开始支持）低版本可以通过设置color为'inherit'或与普通状态相同颜色实现
							disabled: true
						},
						pointer: {
							show: false // 隐藏指针
						},
						axisLine: {
							roundCap: false, // 只适用于平角
							lineStyle: {
								width: 20,
								color: colorSet // 渐变色作为轴的背景色
							}
						},
						axisTick: {
							show: false,
							splitNumber: 2,
							lineStyle: {
								width: 2,
								color: '#999'
							}
						},
						splitLine: {
							show: false,
							length: 8,
							lineStyle: {
								width: 3,
								color: '#999',
								roundCap: false
							}
						},
						axisLabel: {
							show: false,
							distance: 105,
							color: '#999',
							fontSize: 20
						},
						title: {
							show: false
						},
						detail: {
							show: false
						},
						data: [{
							value: value
						}]
					}]
				};

				option && myChart.setOption(option);
			},

		},
	}
</script>

<style scoped>
	.borderBottom {
		border-bottom: 1px solid#346BCD;
	}

	.selectedClass {
		height: 31px;
		line-height: 31px;
		padding: 0 20px;
		background: linear-gradient(0deg, rgba(129, 211, 245, 0.75), rgba(129, 211, 245, 0));
	}

	.selectedBg {
		background-image: url('../assets/bigScreen/icon8.png');
		background-size: 10px 10px;
		background-repeat: no-repeat;
		background-position: 50% 120%;

	}

	.headerTitle {
		font-family: AliHYAiHei;
		font-weight: 400;
		font-size: 37px;
		color: #FFFFFF;
		background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		line-height: 50px;
		height: 64px;
	}

	.headerTitle2 {
		background-image: url('../assets/bigScreen/icon2.png');
		width: 166px;
		height: 39px;
		line-height: 39px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 18px;
		color: #689FFF;
		text-align: center;
	}

	.headerTitle2Selected {
		background-image: url('../assets/bigScreen/icon3.png');
		width: 166px;
		height: 39px;
		line-height: 39px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 18px;
		color: #fff;
		text-align: center;
	}

	.headerTitle3 {
		background-image: url('../assets/bigScreen/icon4.png');
		width: 166px;
		height: 39px;
		line-height: 39px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 18px;
		color: #689FFF;
		text-align: center;
	}

	.headerTitle3Selected {
		background-image: url('../assets/bigScreen/icon5.png');
		width: 166px;
		height: 39px;
		line-height: 39px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 18px;
		color: #fff;
		text-align: center;
	}

	>>>.el-progress-bar__inner {
		background: #8DE5A8 !important;
	}

	>>>.el-progress-bar__outer {
		border-radius: 0px !important;
	}

	.warningTitle {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.normal2 {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 16px;
		color: #5794FF;
		line-height: 34px;
	}

	.normalSelected2 {
		background: #75E7FF !important;
		color: #040F48 !important;
		font-weight: bold;
	}

	.inset-box2 {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		text-shadow: 0px 10px 30px #000000;
		background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		position: relative;
	}

	.inset-box2::before {
		width: 0px;
		height: 0px;
		position: absolute;
		content: '';
		top: 0px;
		left: 0px;
		border: 5px solid #041C62;
		border-bottom-color: transparent;
		border-right-color: transparent;
	}

	.inset-box {
		background-image: url('../assets/bigScreen/icon6.png');
		width: 140px;
		height: 32px;
		line-height: 32px;
		padding-left: 11px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 18px;
		color: #FFFFFF;
	}

	.inset-box::before {
		width: 0px;
		height: 0px;
		position: absolute;
		content: '';
		top: 0px;
		right: 0px;
		border: 5px solid #041C62;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}

	.go-preview {
		height: 100%;
		width: 100%;
	}

	.selected2 {
		color: #fff !important;
		font-weight: bold;
	}

	select {
		background: transparent;
		border: unset;
		-webkit-appearance: none;
		/* Chrome, Safari, Edge, Opera */
		-moz-appearance: none;
		/* Firefox */
		appearance: none;
	}

	.titleText {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.chartItem {
		z-index: 13;
		top: 54px;
		display: block;
		width: 450px;
		padding: 8px
	}

	::-webkit-scrollbar {
		width: 0px;
		height: 0px;
	}

	:hover::-webkit-scrollbar {
		width: 7px;
		height: 7px;
		background-color: #9093994d;
	}

	/*定义滚动条轨道 内阴影+圆角*/
	::-webkit-scrollbar-track {
		background-color: #fff;
		opacity: 0.1;
		width: 0px;
		display: none;
	}

	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 8px;
		background-color: #9093994d;
	}

	.progress-bar {
		position: relative;
		width: 80px;
		height: 100px;
		background-color: transparent;
		border-radius: 4px;
		border: 1px solid #1649A4;
	}

	.progress-bar .progress {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #FFA200;
		transition: height 0.3s ease;
		overflow: hidden;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	/* 伪元素用于创建进度条边缘圆角效果 */
	.progress-bar .progress::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: #FFA200;
		border-radius: 5px;
	}

	.progress-bar2 {
		position: relative;
		width: 80px;
		height: 100px;
		background-color: #fff;
		border-radius: 4px;
	}

	.progress-bar2 .progress {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #36b37e;
		transition: height 0.3s ease;
		overflow: hidden;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	/* 伪元素用于创建进度条边缘圆角效果 */
	.progress-bar2 .progress::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: #36b37e;
		border-radius: 5px;
	}
</style>

<style>
	@keyframes slideShow {
		0% {
			transform: translateX(0);
		}

		/* 开始时图片不动 */
		25% {
			transform: translateX(-190px);
		}

		/* 移动到第二张图片 */
		50% {
			transform: translateX(-380px);
		}

		/* 停留 */
		75% {
			transform: translateX(-790px);
		}

		/* 移动到第三张图片 */
		100% {
			transform: translateX(-980px);
		}

		/* 停留最后一张图 */
	}
</style>